﻿<template>
  <base-dialog
    v-model="modalShow"
    title="选择配件"
    width="800"
    :show-footer="true"
    destroy-on-close
    @close="hide"
    @cancel="hide"
    @confirm="confirm"
  >
    <div class="component-field" v-for="(item, index) in componentList" :key="item.id">
      <div class="component-field-title">{{ item.componentName }}</div>
      <div class="component-field-checkAll">
        <el-checkbox
          v-model="item.checkAll"
          label="全选"
          @change="
            val => {
              handleCheckAll(val, index);
            }
          "
        />
      </div>
      <div class="component-children">
        <div class="component-children-item" v-for="el in item.children" :key="el.id">
          <el-checkbox
            v-model="el.check"
            :label="el.componentName"
            @change="
              val => {
                childrenCheck(val, index);
              }
            "
          />
        </div>
      </div>
    </div>
  </base-dialog>
</template>

<script setup>
  const props = defineProps({
    visble: {
      type: Boolean,
      default: false,
    },
    checkList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  });
  const emit = defineEmits(["hide", "confirmAdd"]);
  // 监听显隐
  watch(
    () => props.visble,
    v => {
      modalShow.value = v;
      if (modalShow.value) {
        loadComponeList();
      }
    }
  );
  // 显示、隐藏
  const modalShow = ref(false);
  // 配件列表
  const componentList = ref([]);
  // 获取配件列表
  const loadComponeList = () => {
    Api.product.getAccessoriesList().then(res => {
      const list = res.data.map(el => {
        const childrenList = el.children.map(item => {
          const isExist = props?.checkList?.find(checkItem => checkItem.id === item.id);
          return { ...item, check: isExist ? true : false, componentType: el.componentName };
        });
        const allCheck = childrenList.every(childrenItem => childrenItem.check);
        return { ...el, checkAll: allCheck, children: childrenList };
      });
      componentList.value = list;
    });
  };
  // 全选
  const handleCheckAll = (val, idx) => {
    console.warn(val, "val");
    if (val) {
      componentList.value[idx].children.forEach(el => {
        el.check = true;
      });
    } else {
      componentList.value[idx].children.forEach(el => {
        el.check = false;
      });
    }
  };
  // 子元素选择
  const childrenCheck = (checked, idx) => {
    if (!checked && componentList.value[idx].checkAll) {
      componentList.value[idx].checkAll = false;
    }
  };
  // 关闭
  const hide = () => {
    emit("hide");
  };
  // 确认
  const confirm = () => {
    const addList = [];
    componentList.value.forEach(item => {
      item.children.forEach(el => {
        if (el.check) {
          addList.push(el);
        }
      });
    });
    if (!addList.length) {
      $msg.warning("请选择配件");
      return;
    }
    emit("confirmAdd", addList);
  };
</script>

<style lang="scss" scoped>
  .component-field {
    margin-bottom: 16px;
    .component-field-title {
      height: 22px;
      font-size: 16px;
      color: var(--ct1);
      position: relative;
      padding-left: 8px;
      font-weight: bold;
    }
    .component-field-title::before {
      content: "";
      position: absolute;
      left: 0;
      top: 3px;
      width: 3px;
      height: 16px;
      border-radius: 4px;
      background-color: var(--bd);
    }
    .component-field-checkAll {
      width: 100%;
      padding: 13px 0;
      border-bottom: 1px solid var(--cb1);
    }
    .component-children {
      width: 100%;
      display: flex;
      margin-top: 8px;

      .component-children-item {
        width: 25%;
      }
    }
  }
</style>
